<template>
  <div class="table-box-body">
    <table width="100%" border="1">
      <tr>
        <td rowspan="2" class="td-time">陪餐日期</td>
        <td rowspan="2">陪餐类型</td>
        <td rowspan="2">陪餐班级</td>
        <td rowspan="2">陪餐家长</td>
        <td colspan="3">厨房卫生环境</td>
        <td rowspan="2">食谱名称</td>
        <td rowspan="2">陪餐时间</td>
        <td colspan="8">陪餐观察记录</td>
<!--        <td rowspan="2">本周情况描述</td>-->
      </tr>
      <tr>
        <td class="td-01">环境整洁、卫生</td>
        <td class="td-02">工具、容器等分类、分区、分色整理，使用</td>
        <td>存在问题</td>
        <td class="td-40">合理搭配</td>
        <td class="td-40">营养均衡</td>
        <td>口感</td>
        <td>观感</td>
        <td>温度</td>
        <td>其他</td>
        <td>亮点</td>
        <td>意见建议</td>
      </tr>
      <template v-if="foodDay.length">
        <template v-for="item in foodDay">
          <!--            第一行 item_tr 1 2 3-->
          <tr :key="`${item.id}`">

            <td>{{item.day}}</td>
            <td>午餐</td>
            <td>{{item.classes?item.classes.class_name:''}}</td>
            <td>{{item.parents?item.parents.name:''}}</td>
            <td v-for="observe in item.observe_log" :key="observe.id">
            <span v-if="observe.is_check">
              <em v-if="observe.desc == 2">✓</em>
              <em v-else>◯</em>
            </span>
              <span v-else>
              {{observe.desc}}
            </span>
            </td>
            <td>
              {{item.foodList}}
            </td>
            <td>
              {{item.create_time}}
            </td>
            <td v-for="workItem in item.work" :key="workItem.id">
            <span v-if="workItem.is_check">
              <em v-if="workItem.desc == 2">✓</em>
              <em v-else>◯</em>
            </span>
              <span v-else>
              {{workItem.desc}}
            </span>
            </td>
            <!--          <td :rowspan="foodDay.length">-->
            <!--            {{ weekContent }}-->
            <!--            <el-button size="mini" @click="weekVisible=true" v-if="!weekContent">编辑</el-button>-->
            <!--          </td>-->
          </tr>
        </template>
      </template>
      <template v-else>
        <tr>
          <td colspan="17">
            未找到相关记录
          </td>
        </tr>
      </template>
    </table>
    <div class="tips-day-list">备注：完全做到（✓），存在问题（◯）并填写意见建议</div>
  </div>
</template>

<script>
export default {
  props: ['foodDay', 'foodType', 'weekName', 'weekContent'],
  name: "weekTable",
  methods: {
    showWeekFn() {
      this.$emit('showWeekFn')
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
}

table th {
  height: 50px;
}

table td {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

table td em {
  font-style: normal;
  font-size: 16px;
}

table td i {
  font-style: normal;
  font-size: 12px;
}

.table-title {
  margin-bottom: 10px;
}

.table-title span {
  font-weight: bold;
}

.td-01 {
  width: 80px;
}

.td-02 {
  width: 133px;
}

.td-40 {
  width: 40px
}

.td-50 {
  width: 50px
}

.tips-day-list {
  padding: 10px 0 20px;
  text-align: center;
}

.td-time {
  width: 80px
}
</style>
